<!-- 会员新增 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="applyType ? `新增${Dict.getDictItem(Dict.getLocal('applyTypeDict'), applyType).dictLabel}` : '新增会员'"
    centered
    :width="800"
    v-model="visible"
    @ok="handleSubmit"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
      <a-form-model-item label="头像">
        <uploadImg :value="form.leadingAvatar" :width="100" :disabled="true"></uploadImg>
      </a-form-model-item>
      <a-form-model-item label="请选择会员类型" v-if="!applyType">
        <a-radio-group v-model="form.applyType">
          <a-radio :value="1">单位会员</a-radio>
          <a-radio :value="2">个人会员</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item v-if="form.applyType === 1" label="单位名称" prop="memberName">
        <a-input :disabled="!!memberName" v-model="form.memberName" />
      </a-form-model-item>
      <a-form-model-item v-else label="单位名称">
        <a-input v-model="form.companyName" />
      </a-form-model-item>
      <a-form-model-item label="负责人姓名" prop="leadingName">
        <a-input :disabled="!!leadingName" v-model="form.leadingName" />
      </a-form-model-item>
      <a-form-model-item label="负责人手机号码" prop="leadingPhone">
        <a-input :disabled="!!leadingPhone" v-model="form.leadingPhone" />
      </a-form-model-item>
      <a-form-model-item label="会员职务" prop="levelId">
        <a-select v-model="form.levelId">
          <a-select-option v-for="item in memberLevelOption" :key="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="入会时间" prop="joinTime">
        <a-date-picker v-model="form.joinTime" format="YYYY-MM-DD" :disabledDate="disabledStartDate" />
      </a-form-model-item>
      <a-form-model-item label="到期时间" prop="memberEndTime">
        <a-date-picker v-model="form.memberEndTime" format="YYYY-MM-DD" :disabledDate="disabledEndDate" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addMember } from '@/api/member/member'
import moment from 'moment'
import uploadImg from '@/components/UpFile/uploadImg.vue'

export default {
  props: ['memberLevelOption', 'applyType', 'memberName', 'leadingName', 'leadingPhone', 'registerId', 'leadingAvatar'],
  components: {
    uploadImg
  },
  data() {
    return {
      title: '分配专员',
      visible: false,
      form: {
        applyType: 1,
        memberName: undefined,
        companyName: undefined,
        leadingName: undefined,
        leadingPhone: undefined,
        levelId: undefined,
        joinTime: undefined,
        memberEndTime: undefined,
        registerId: undefined,
        leadingAvatar: undefined
      },
      rules: {
        memberName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        leadingName: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }],
        leadingPhone: [{ required: true, message: '请输入负责人手机号码', trigger: 'blur' }],
        levelId: [{ required: true, message: '请选择会员职务', trigger: 'change' }],
        joinTime: [{ required: true, message: '请选择入会时间', trigger: 'change' }],
        memberEndTime: [{ required: true, message: '请选择到期时间', trigger: 'change' }]
      }
    }
  },
  watch: {},
  methods: {
    show() {
      Object.assign(this.$data.form, this.$options.data().form) // 重置数据
      this.visible = true
      this.form.applyType = this.applyType || 1
      if (this.memberName) {
        this.form.memberName = this.memberName
      }
      if (this.leadingName) {
        this.form.leadingName = this.leadingName
      }
      if (this.leadingPhone) {
        this.form.leadingPhone = this.leadingPhone
      }
      this.form.registerId = this.registerId
      this.form.leadingAvatar = this.leadingAvatar
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    disabledStartDate(startValue) {
      const endValue = this.form.memberEndTime
      if (!startValue || !endValue) {
        return false
      }
      return (
        moment(startValue)
          .add('days', 1)
          .valueOf() > endValue.valueOf()
      )
    },
    disabledEndDate(endValue) {
      const startValue = this.form.joinTime
      if (!endValue || !startValue) {
        return false
      }
      return (
        moment(startValue)
          .add('days', 1)
          .valueOf() >= endValue.valueOf()
      )
    },
    async handleSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let { msg } = await addMember(this.form)
          this.$message.success(msg)
          this.$emit('success')
          this.visible = false
        }
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
